<template>
  <div class="view-fill">
    <div v-if="!showModify.visible" class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        :title="title"
        :btn-list="btnList"
        :needOperateAffair="true"
        :operateAffairData="affairTableInfo"
        @returnBack="returnBack"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information
              :info="formInfo"
              :image-field="formInfo.imageField"
            />
          </div>
        </div>
      </NewFullScreen>
    </div>
    <!-- 新增或修改 -->
    <accessories-archives-modify
      v-if="showModify.visible"
      :id="props.id"
      v-model="showModify.visible"
      :title="showModify.title"
      :type="showModify.type"
      @returnModify="modifyCallback"
    />
  </div>
</template>

<script setup name="accessoriesArchivesDetails">
import utils from '@/common/js/utils' // 公共方法

import BasicInformation from '@/components/BasicInformation/index'
import { orderAffairAll } from '@/api/affair'
import PageTable from '@/components/PageTable'
import AccessoriesArchivesModify from './modify'
import { detailAccessoriesArchives } from '@/api/equipment'
// import func from '../../../../../vue-temp/vue-editor-bridge'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: '',
  },
})
const title = ref('设备详情')
const formInfo = ref({
  data: {},
  imageField: {
    label: '设备照片',
    value: 'pictureList',
  },
  fieldList: [
    {
      label: '配件名称',
      value: 'commonName',
      type: 'text',
    },
    { label: '配件编码', value: 'code', type: 'text' },
    {
      label: '单价',
      value: 'referencePrice',
      type: 'text',
      formatter: proxy.$fn.TripartiteMethod,
    },
    {
      label: '状态',
      value: 'statusValue',
      type: 'text',
    },
    {
      label: '医疗器械分类目录',
      value: 'deviceTypeValue',
      type: 'text',
    },
    {
      label: '计量单位',
      value: 'unitName',
      type: 'text',
    },
    {
      label: '品牌',
      value: 'trademark',
      type: 'text',
    },
    {
      label: '规格',
      value: 'standard',
      type: 'text',
    },
    {
      label: '生产厂家',
      value: 'brandName',
      type: 'text',
    },
    {
      label: '配件分类',
      value: 'accessoriesCategoryValue',
      type: 'text',
    },
    { label: '配件简称', value: 'alias', type: 'text' },
    { label: '外部系统标识', value: 'mnemonic', type: 'text' },
    {
      label: '备注',
      value: 'remark',
      type: 'text',
    },
  ],
  labelWidth: '120px',
})
// 操作流水
const affairTableInfo = ref({
  query: {
    orderType: 49,
    orderId: props.id,
    sort: 'operate_time desc',
  },
})
const btnList = ref([
  {
    label: '修改',
    event: update,
    show: proxy.$permission('accessoriesArchives:update'),
  },
])
const showModify = ref({
  title: '修改',
  type: 'update',
  visible: false,
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    // 更新父组件visible
    emits('update:visible', val)
  },
})

onMounted(() => {
  getDeatil()
})
const returnBack = () => {
  emits('returnBack')
}
const getDeatil = () => {
  detailAccessoriesArchives(props.id).then((resp) => {
    if (resp && resp.success) {
      let data = resp.data
      formInfo.value.data = {
        commonName: data.commonName,
        code: data.code,
        unitId: data.unitId,
        unitName: data.unitName,
        standard: data.standard,
        status: data.status,
        statusValue: data.statusValue,
        remark: data.remark,
        trademark: data.trademark,
        alias: data.alias,
        mnemonic: data.mnemonic,
        accessoriesCategory: data.accessoriesCategory,
        accessoriesCategoryValue: data.accessoriesCategoryValue,
        picture: data.picture,
        deviceType: data.deviceType,
        deviceTypeValue: data.deviceTypeValue,
        createUser: data.createUser,
        createTime: data.createTime,
        orgId: data.orgId,
        brandId: data.brandId,
        brandName: data.brandName,
        referencePrice: data.referencePrice,
      }

      if (formInfo.value.data.picture) {
        formInfo.value.data.pictureList = utils.splitArr(
          formInfo.value.data.picture
        )
      }
    }
  })
}

function update() {
  showModify.value.visible = true
}
const modifyCallback = () => {
  showModify.value.visible = false
  getDeatil()
}
</script>

<style scoped>
.inputRefScanHidden {
  position: absolute;
  color: transparent;
  background-color: transparent;
  caret-color: black;
  border: none;
  outline: none;
  height: 30px;
  margin-left: 115px;
  width: 200px;
  z-index: 12;
}

.inputScan {
  ime-mode: disabled;
}

.active {
  display: none;
}
</style>
